Yahoo user interface 新一代架構

1. Yahoo!Kimo YUI 3: Design and Architecture Thomas S. Sha YUI developer.yahoo.com/yui/

2. YUI Evolved Faster, Lighter, Smarter

3. YUI Evolved Architecture, Lifecycle, Packaging

5. From YAHOO to YUI() YUI().use(“io-base”, function (Y) { var request = Y.io( ); });

13. YUI IO – Size Analysis

15. Extensions: Class-based Flexibility Create an Overlay Class Y.Overlay = Y.Base.build("overlay", Y.Widget, [ Widget-Position, // Positioning Widget-Position-Ext, // Adv. Positioning Widget-Stack, // Shim/Stack Support Widget-StdMod // Header/Body/Footer ]);

16. Extensions: Reuse Reuse only the extensions desired for Tooltip Y.Tooltip = Y.Base.build("tooltip", Y.Widget, [ Widget-Position, // Positioning Widget-Stack // Shim/Stack Support ]);

17. Plug-in: Instance-based Flexibility Instance of Overlay, adding io support var ioOverlay = new Y.Overlay(...); ioOverlay.plug(Y.OverlayIOPlugin, { url: "http://host.foo.com/getOverlayContent" }); ioOverlay.io.refreshContent();

18. Plug-in: Instance-based Override Instance of Overlay, adding Animation Support var animOverlay = new Y.Overlay(...); animOverlay.plug(Y.WidgetAnimPlugin); animOverlay.show(); animOverlay.hide();

20. Event Façades // DOM Event linkNode.on(&quot;click&quot;, function(e) { if (!e.target.hasClass(&quot;selector&quot;)) { e.preventDefault(); } }); // Custom Event slider.on(&quot;valueChange&quot;, function(e) { if (e.newVal < 200) { e.preventDefault(); } });

21. Event Aspect in YUI 2 // Publisher show : function() { if (this.fire(&quot;beforeShow&quot;)) { YAHOO.util.Dom.removeClass(node, &quot;hidden&quot;); this.fire(&quot;show&quot;); } } // Subscriber overlay.subscribe(&quot;beforeShow&quot;, function(t, args) { if (!taskSelected) { return false; } } overlay.subscribe(&quot;show&quot;, function(t, args) {...});

22. Event Aspect in YUI 3 // Publisher show : function() { this.fire(&quot;show&quot;); } _defaultShowFunction : function(e) { node.removeClass(&quot;hidden&quot;); } // Subscriber overlay.on(&quot;show&quot;, function(e) { if (!taskSelected) { e.preventDefault(); } } overlay.after(&quot;show&quot;, function(e) { });

23. Event Flow: On -> Default -> After ON ON Default Behavior After After After this.fire(&quot;select&quot;); e.stopImmediatePropagation() e.preventDefault() e.preventDefault() e.stopImmediatePropagation()

24. Bubbling: Delegation Beyond the DOM Menu.prototype = { addItem : function(menuItem) { var menu = this; menuItem.addTarget(menu); }, initializer : function() { this.on(&quot;menuitem:select&quot;, this._itemSelect); } } menu.getItem(2).on(&quot;select&quot;, function(e) { // Handle select for item 2, don’t bubble to Menu e.stopPropagation(); ... } Event Bubbling: Delegation Beyond the DOM

25. Event Flow : Bubbling Menu MenuItem ON ON Default After After After this.fire(&quot;menuitem:select&quot;); ON Default After After e.stopPropagation()

26. // YUI 2 overlay.on(&quot;show&quot;, myShowHandler, myApp, true); overlay.unsubscribe(&quot;show&quot;, myShowHandler, myApp); // YUI 3 var handle = overlay.on(&quot;show&quot;, myShowHandler, myApp, true); handle.detach(); // Or overlay.on(&quot;myApp:show&quot;, myShowHandler, myApp, true); overlay.on(&quot;myApp:hide&quot;, myHideHandler, myApp, true); overlay.detach(&quot;myApp:show&quot;); overlay.detach(&quot;myApp:*&quot;); Detaching Event Listeners

35. Node is the single point for DOM access, throughout YUI 3. Makes YUI 3 ideal as a trusted source in protected environments such as Caja and Ad-Safe. Constrained by Façades

36. var items = Y.Node.all(&quot;.actions li&quot;); items.addClass(&quot;disabled&quot;); items.set(&quot;title&quot;, &quot;Item Disabled&quot;); items.each(function(node) { node.addClass(&quot;disabled); node.set(&quot;title&quot;, &quot;Item Disabled&quot;); }); NodeList: Operations a on Node Collection